<template>
	<view class="nav_outer">
		<view style="height: 240rpx">
			<view style="padding: 0 20rpx; height: 100px; background: #5690fb">
				<view class="titleContent">新型冠状病毒核酸检测</view>
			</view>
		</view>
		<view style="padding: 20rpx">
			<view style="background: #fff; padding: 20rpx">
				<view class="hint">*若不选日期默认为当天</view>
				<view class="dateTop">
					<u-calendar
						ref="calendar"
						v-model="showDate"
						:max-date="getTime(7)"
						:min-date="getTime(1)"
						@change="changeTime"
					></u-calendar>
					<view @click="showDate = true" class="date_new">{{
						newDate == '' ? getTime(1) : newDate
					}}</view>
				</view>
				<view
					v-if="applyFee"
					style="font-size: 32rpx; color: red; margin: 25px 0"
					>预估价格：{{ '￥' + applyFee }}（请以实际金额为准）</view
				>

				<!--  v-if="forenoonShow" -->
				<view v-if="titleShow">
					<view v-if="allDate.length < 1">
						<view class="timeResidue_box" v-if="forenoon.length > 0">
							<view class="timeResidue">
								<view
									:class="{ timeList: forenoonIdx == 1 }"
									@click="forenoonClick"
									>上午
								</view>
								<!-- <view
									:class="{ timeList: forenoonIdx == index }"
									v-for="(item, index) in forenoon"
									:key="index"
									@click="forenoonClick(index, item)"
								>
									{{ item.startTime }}
								</view> -->
							</view>
						</view>
						<view class="timeResidue_box" v-if="afternoon.length > 0">
							<view class="timeResidue">
								<view
									:class="{ timeList: afternoonIdx == 1 }"
									@click="afternoonClick"
									>下午
								</view>
								<!-- <view
									:class="{ timeList: afternoonIdx == index }"
									v-for="(item, index) in afternoon"
									:key="index"
									@click="afternoonClick(index, item)"
								>
									{{ item.startTime }}
								</view> -->
							</view>
						</view>

						<!-- 夜间时间 -->
						<view class="timeResidue_box" v-if="residue.length > 0">
							<view class="timeResidue">
								<view :class="{ timeList: idx == 1 }" @click="timeClick"
									>夜间
								</view>
								<!-- <view
									:class="{ timeList: idx == index }"
									v-for="(item, index) in residue"
									:key="index"
									@click="timeClick(item, index)"
									>{{ item.startTime }}</view
								> -->
							</view></view
						>
					</view>

					<!-- 全天 -->
					<view v-else>
						<view class="timeResidue">
							<view :class="{ timeList: allIndex == 1 }" @click="allClick"
								>全天
							</view>
							<!-- <view
								:class="{ timeList: allIndex == index }"
								v-for="(item, index) in allDate"
								:key="index"
								@click="allClick(item, index)"
								>{{ item.startTime }}</view
							> -->
						</view>
					</view>
				</view>
				<view v-else> 该日期无排班 </view>
			</view>
		</view>
		<view style="padding: 20rpx">
			<view style="padding: 20rpx; background: #fff">
				<u-checkbox-group v-model="value" @change="radioGroupChange">
					<u-checkbox
						v-for="(item, index) in list"
						:key="index"
						v-model="item.checked"
						:name="item.name"
						:disabled="item.disabled"
					>
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
				<view v-if="heat">
					<view style="padding: 20rpx; background: #ccc">{{
						temperatureData == '' ? '请选择您当前的体温' : temperatureData
					}}</view>
					<u-button @click="temperatureClick">请选择体温</u-button>
				</view>
				<view style="height: 30rpx"></view>
				<u-checkbox-group v-model="healthData" @change="healthChange">
					<u-checkbox
						v-for="(item, index) in health"
						:key="index"
						v-model="item.checked"
						:name="item.name"
						:disabled="item.disabled"
					>
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view style="height: 50px; width: 100%"></view>
		<view class="nextStep" :style="{ bottom: heightData + 'px' }">
			<u-button
				type="primary"
				:plain="true"
				@click="nextStep"
				:disabled="disabled"
				>立即支付</u-button
			>
		</view>
		<view class="safe" id="safe"></view>
		<!-- 温度选择 -->
		<u-select
			v-model="temperature"
			:list="temperatureList"
			@confirm="confirm"
		></u-select>
		<!-- 提示信息 -->
		<u-modal
			v-model="show"
			:content="content"
			:show-cancel-button="false"
			:show-title="false"
			:content-style="{ color: 'red', fontSize: '38rpx' }"
		></u-modal>
		<u-modal
			v-model="showHint"
			:content="contentHint"
			:show-cancel-button="false"
			:show-title="false"
			:content-style="{ color: 'red', fontSize: '30rpx' }"
			@confirm="confirmClick"
		></u-modal>
		<!-- @confirm="confirm" -->
		<u-modal
			v-model="Contentshow"
			:content="showContentTitle"
			:show-cancel-button="false"
			:show-title="false"
			:content-style="{ color: 'red', fontSize: '30rpx' }"
		></u-modal>
	</view>
</template>

<script>
import getTime from '../../utils/time'
import { selectPlanTime, insert } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			idx: -1,
			allIndex: -1,
			forenoonIdx: -1,
			afternoonIdx: -1,
			heightData: '',
			formId: '',
			value: '',
			healthData: '',
			showDate: false,
			newDate: '',
			// residueShow: false,
			// forenoonShow: false,
			show: false,
			showHint: false,
			heat: true,
			Contentshow: false,
			showContentTitle: '您未选择时间段或未勾选完成',
			content:
				'本业务适用于住院陪人及自愿检查人群核酸检测预约，发热人员、15天内有中高风险地区旅行居住请到发热门诊分诊处就诊',
			contentHint: '',
			list: [
				{
					name: '您14天内有没有过发热37.3°以上',
					disabled: false,
					checked: false,
				},
			],
			health: [
				{
					name: '您的健康吗是否为绿码',
					disabled: false,
					checked: false,
				},
			],
			// 温度选择
			temperature: false,
			temperatureList: [
				{
					value: '0',
					label: '38',
				},
				{
					value: '1',
					label: '38.5',
				},
				{
					value: '2',
					label: '39',
				},
				{
					value: '3',
					label: '39.5',
				},
				{
					value: '4',
					label: '40',
				},
			],
			temperatureData: '',
			// 剩余号源（暂时预留）
			// forenoonNum: '',
			// forenoonNumSum: '',
			// afternoonNum: '',
			// afternoonNumSum: '',
			// 夜间
			residue: [],
			// 上午
			forenoon: [],
			// 下午
			afternoon: [],
			// 全天
			allDate: [],

			//传递的时间
			timeSlotData: '',
			startTime: '',
			endTime: '',
			// 费用
			// 科室
			deptName: '',
			deptId: '',
			// 立即支付传递参数
			applyFee: '',
			deptCode: '',
			deptId: '',
			// showContent: true,
			shiftDate: '',
			clinicId: '',
			clinicTimeId: '',
			timeSerialNumber: '',
			titleShow: false,
			disabled: false,
		}
	},
	onLoad(options) {
		this.formId = options.formId
		this.selectPlanTimeData(this.orgId, this.orgCode, this.formId, getTime(1))
	},
	computed: {
		...mapState({
			orgId: state => state.orgId,
			patientId: state => state.patientId,
			orgCode: state => state.orgCode,
			patientcardNo: state => state.patientcardNo,
			patientIdentity: state => state.patientIdentity,
			CardId: state => state.CardId,
		}),
	},
	mounted() {
		// 获取底部安全区高度
		const dom = uni.createSelectorQuery().in(this)
		console.log(dom, 333)
		dom
			.select('#safe')
			.boundingClientRect(data => {
				// console.log(data, '高度')
				// this.heightData = data.height
			})
			.exec()
		this.$nextTick(() => {
			this.$refs.calendar.activeDate = getTime(1)
		})
	},
	methods: {
		getTime,
		temperatureClick() {
			this.temperature = true
		},
		confirm(e) {
			console.log(e, '233213')
			if (e) {
				this.temperatureData = e[0].label
			} else if (e == undefined) {
				this.temperatureData = ''
			}
		},
		insertData(parameterPassing) {
			insert(parameterPassing)
				.then(({ data, head }) => {
					console.log(data, head, 1111)
					if (head.code == 200) {
						this.$pay(data).then(succcess => {
							// console.log('success', succcess)
							this.value == ''
							this.temperatureData == ''
							this.startTime == ''
							this.endTime == ''
							this.$router.navigateTo({
								url: `/pages/appFormGenerator/index?id=${this.formId}&orgId=${this.orgId}&customerFormDataId=${data.formDataId}`,
							})
						})
					} else {
						console.log(data)
						this.contentHint = data
						this.showHint = true
					}
					this.disabled = false
				})
				.catch(() => {
					this.disabled = false
				})
		},

		nextStep() {
			if ((this.value || this.temperatureData) && this.startTime) {
				this.disabled = true
				this.Contentshow = false
				// showContent控制页面的时间展示，如果为true当天时间段分为上午下午
				// if (this.showContent) {
				let parameterPassing = {
					// 表单id
					formId: this.formId,
					// 当前体温
					temperature: this.temperatureData,
					// 健康码是否正常 0是 1否
					healthyCodeFlag: this.healthData == '' ? '1' : '0',
					applyDateStr: this.newDate == '' ? getTime(1) : this.newDate,
					// 当前选择的时间段
					startHisTime: this.startTime,
					endHisTime: this.endTime,
					deptName: this.deptName,
					// 患者ID
					patientId: this.patientId,
					// 表单ID
					// formId:''
					// 班次
					shift: this.shiftDate,
					// 科室id
					deptId: this.deptId,

					deptCode: this.deptCode,
					scheduleId: this.clinicId,
					clinicTimeId: this.clinicTimeId,
					timeSerialNumber: this.timeSerialNumber,
					cardNo: this.patientcardNo,
					idCard: this.patientIdentity,
					cardId: this.CardId,
				}
				console.log(parameterPassing, '12131321')
				// console.log(this.shiftDate, '有日期', parameterPassing)
				this.insertData(parameterPassing)
				// }
			} else {
				this.Contentshow = true
			}
		},
		// 日期选择
		changeTime(e) {
			console.log(e)
			this.newDate = e.result
			this.selectPlanTimeData(
				this.orgId,
				this.orgCode,
				this.formId,
				this.newDate,
			)
		},
		// 体温选择
		radioGroupChange(e) {
			if (e.length > 0) {
				this.value = e[0]
			} else {
				this.value = ''
			}
			if (this.value != '') {
				this.temperatureData = ''
				this.heat = false
			} else {
				this.heat = true
			}
		},
		healthChange(e) {
			if (e.length > 0) {
				this.healthData = e[0]
			} else {
				this.healthData = ''
			}
		},
		publicParameter(item) {
			this.endTime = item.endTime
			this.startTime = item.startTime
			this.shiftDate = item.shift
			this.clinicId = item.clinicId
			this.clinicTimeId = item.clinicTimeId
			this.timeSerialNumber = item.timeSerialNumber
		},
		// 夜间
		timeClick() {
			this.idx = 1
			this.forenoonIdx = -1
			this.afternoonIdx = -1
			this.allIndex = -1
			this.publicParameter(this.residue[0])
		},
		// 上午
		forenoonClick() {
			this.idx = -1
			this.afternoonIdx = -1
			this.allIndex = -1
			this.forenoonIdx = 1
			this.publicParameter(this.forenoon[0])
		},
		// 下午
		afternoonClick() {
			this.idx = -1
			this.forenoonIdx = -1
			this.allIndex = -1
			this.afternoonIdx = 1
			this.publicParameter(this.afternoon[0])
		},
		//全天
		allClick() {
			this.idx = -1
			this.afternoonIdx = -1
			this.forenoonIdx = -1
			this.allIndex = 1
			this.publicParameter(this.allDate[0])
		},
		//页面没有数据时跳转表单
		// confirm() {
		// 	this.$router.navigateTo({
		// 		url: `/pages/appFormGenerator/index?id=${this.formId}&orgId=${this.orgId}`,
		// 	})
		// },
		selectPlanTimeData(orgId, orgCode, formId, applyDateStr) {
			selectPlanTime({
				orgId: orgId,
				orgCode: orgCode,
				formId: formId,
				applyDateStr: applyDateStr,
			}).then(({ data, head }) => {
				console.log(data, head, '测试')
				this.idx = -1
				this.allIndex = -1
				this.forenoonIdx = -1
				this.afternoonIdx = -1
				this.startTime = ''
				if (
					head.code == 200 &&
					Array.isArray(data.timeList) &&
					data.timeList.length > 0
				) {
					this.titleShow = true
					if (data.timeList != null) {
						this.residue = []
						this.forenoon = []
						this.afternoon = []
						this.allDate = []
						this.show = true
						this.showHint = false
						this.applyFee = data.applyFee
						this.deptName = data.deptName
						this.deptId = data.deptId
						this.deptCode = data.deptCode
						data.timeList.map(i => {
							if (i.shift == 'N') {
								// this.residueShow = true
								// this.forenoonShow = false
								// 夜间
								i.timeSlot &&
									i.timeSlot.map(i => {
										i.shift = 'N'
									})
								this.residue = i.timeSlot
							} else if (i.shift == 'A') {
								// this.residueShow = false
								// this.forenoonShow = true
								// 上午
								i.timeSlot &&
									i.timeSlot.map(i => {
										i.shift = 'A'
									})
								this.forenoon = i.timeSlot
							} else if (i.shift == 'P') {
								// this.residueShow = false
								// 下午
								// this.forenoonShow = true
								i.timeSlot &&
									i.timeSlot.map(i => {
										i.shift = 'P'
									})
								this.afternoon = i.timeSlot
							} else if (i.shift == 'F') {
								i.timeSlot &&
									i.timeSlot.map(i => {
										i.shift = 'F'
									})
								this.allDate = i.timeSlot
								console.log(i.timeSlot, '全天')
							}
						})

						// 上午剩余号源
						// this.forenoonNum = data.timeList[0].remainderNum
						// this.forenoonNumSum = data.timeList[0].remainderNum

						// 下午剩余号源
						// this.afternoonNum = data.timeList[1].remainderNum
						// this.afternoonNumSum = data.timeList[1].remainderNum
					}
				} else {
					this.titleShow = false
				}
			})
		},
		confirmClick() {
			this.selectPlanTimeData(
				this.orgId,
				this.orgCode,
				this.formId,
				this.newDate == '' ? getTime(1) : this.newDate,
			)
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #f3f4f6;
}
.titleContent {
	text-align: center;
	position: absolute;
	height: 180rpx;
	width: calc(100% - 20px);
	background: #ffffff;
	border-radius: 10rpx;
	color: #000;
	font-size: 40rpx;
	font-weight: bold;
	top: 50rpx;
	line-height: 180rpx;
}
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.hint {
	color: red;
	text-align: center;
	font-size: 32rpx;
	padding: 20rpx;
}
.date_new {
	border-width: 1px;
	border-color: #5690fb;
	border-style: dashed;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #ffffff;
	color: #5690fb;
	font-size: 16px;
	/* display: inline-block; */
	text-align: center;
}
.nextStep {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	z-index: 999;
	background: #fff;
}
.timeResidue_box {
	display: inline-block;
}
.timeResidue {
	// display: flex;
	// flex-wrap: wrap;
	// margin-top: 20rpx;
	// margin-bottom: 80rpx;

	view {
		padding: 0 20px;
		color: #056905;
		// width: 15%;
		text-align: center;
		height: 35px;
		/* align-items: center; */
		line-height: 35px;
		background: rgb(240, 249, 2449);
		margin: 15px 15px;
		font-size: 13px;
	}
	.timeList {
		background: #679dffcc;
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>